<template>
  <div id="nav">
    <ul id="foot_ul">
      <li
        class="foot_li"
        v-for="(item, index) in footInfo"
        :key="item.id"
        :class="{ active: current == index }"
        @click="btn(index, item.id, item.path)"
      >
        <span :class="item.icon" class="sapn_icon"></span>
        <span class="span_name">{{ item.list }}</span>
      </li>
    </ul>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      footInfo: [
        {
          id: 1,
          list: "首页",
          icon: "el-icon-house",
          path: "/home"
        },
        {
          id: 2,
          list: "分类",
          icon: "el-icon-notebook-2",
          path: "/classify"
        },
        {
          id: 3,
          list: "购物车",
          icon: "el-icon-shopping-cart-2",
          path: "/shop"
        },
        {
          id: 4,
          list: "个人中心",
          icon: "el-icon-user",
          path: "/About"
        }
      ]
    };
  },
  created() {
    if (sessionStorage.getItem("icon")) {
      this.$store.commit("state_icon", sessionStorage.getItem("icon"));
    }
    this.current = this.$store.state.icon;
  },
  computed: {
    current: {
      get: function() {
        if (this.$store.state.icon) {
          return this.$store.state.icon;
        }
        return 0;
      },
      set: function() {}
    }
  },
  methods: {
    btn(index, id, path) {
      this.$router.push(path);
      this.$store.commit("state_icon", index);
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: relative;
}
#foot_ul {
  width: 100%;
  float: left;
  display: block;
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background: #fff;
}
.sapn_icon,
.span_name {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 20px;
}
.sapn_icon {
  padding-top: 5px;
}
.span_name {
  padding-bottom: 5px;
}

.foot_li {
  list-style: none;
  width: 25%;
  text-align: center;
  float: left;
  font-size: 13px;
}
.active {
  background: #1a1a29;
  color: #fff;
}
</style>